<template>
    <div style="width: 100%; background-color: #fff; overflow: hidden">
        <div class="head-nav" :style="'background-color: ' + color" >

            <div style="margin: 0 auto; width: 700px;">
                <el-carousel  @change="swiper" style="width: 700px">
                    <el-carousel-item>
                        <img src="http://www.handsomehuang.cn:8081/img2/web/0.webp" alt="" width="700" height="300px">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="http://www.handsomehuang.cn:8081/img2/web/1.jpg" alt=""  width="700" height="300px">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="http://www.handsomehuang.cn:8081/img2/web/2.webp" alt=""  width="700" height="300px">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="http://www.handsomehuang.cn:8081/img2/web/4.webp" alt=""  width="700" height="300px">
                    </el-carousel-item>
                </el-carousel>

            </div>
        </div>
        <div style="width: 1400px; margin: 0 auto; padding-top: 50px">
<!--            <div class="logo-three">-->
<!--                <ul >-->
<!--                    <li><img src="../../assets/img/souye.png" height="35" width="35"/><span>首页</span></li>-->
<!--                    <li><img src="../../assets/img/dongtai.png" height="35" width="35"/><span>动态</span></li>-->
<!--                    <li><img src="../../assets/img/paihang.png" height="35" width="35"/><span>排行</span></li>-->
<!--                </ul>-->
<!--            </div>-->
<!--            <div class="right-nav">-->
<!--                <ul>-->
<!--                    <li><img src="../../assets/img/xuexi.png" height="20" width="20"/><span>学习</span></li>-->
<!--                    <li><img src="../../assets/img/zhibo.png" height="20" width="20"/><span>直播</span></li>-->
<!--                    <li><img src="../../assets/img/zhuanlan.png" height="20" width="20"/><span>专栏</span></li>-->
<!--                    <li><img src="../../assets/img/huodong.png" height="20" width="20"/><span>活动</span></li>-->
<!--                </ul>-->
<!--            </div>-->


            <div></div>
            <div class="qianduan" ><span class="font" style="width: 100px; margin: 0 auto" >大前端</span></div>
            <div >
                <div style=" width:1370px; border-top: 5px solid #f4f4f4">
                </div>
                <div class="fenlei" @click="videoPlay(item.url, item.title, item.point,item.views,item.collection,item.id,item.size,item.upId,item.upName,item.des, item.jur, item.pay, item.imgUrl)" v-for="item in web" style="display: inline-block">
                    <video-card  :id="item.id" :title="item.title" :url="item.url" :point="item.point" :collection="item.collection" :views="item.views" :size="item.size" :type="item.type" :time="item.time" :upId="item.upId" :upName="item.upName" :des="item.des" :imgUrl="item.imgUrl" :jur="item.jur" :pay="item.pay"></video-card>
                </div>
            </div>
            <div style="margin-bottom: 10px; font-size: 16px; font-weight: bold; height: 32px; position: relative; margin-top: 50px">
<!--                <img-->
<!--                    src="../../assets/img/video-logon.png" height="32" width="32"/>-->
                <span style="position: relative; top: 8px; font-size: 30px; height: 30px; line-height: 30px; left: 650px; font-weight: normal; ">java</span></div>
            <div style=" width:1370px; border-top: 5px solid #f4f4f4; margin-top: 30px; margin-bottom: 10px">
            </div>
            <div @click="videoPlay(item.url, item.title, item.point,item.views,item.collection,item.id,item.size,item.upId,item.upName,item.des, item.jur, item.pay, item.imgUrl)" v-for="item in java" style="display: inline-block;">
                <video-card :id="item.id" :title="item.title" :url="item.url" :point="item.point" :collection="item.collection" :views="item.views" :size="item.size" :type="item.type" :time="item.time" :upId="item.upId" :upName="item.upName" :des="item.des" :imgUrl="item.imgUrl" :jur="item.jur" :pay="item.pay" ></video-card>
            </div>
            <div style="margin-top: 100px; width: 100px;"></div>
            <div style="margin-bottom: 10px; font-size: 30px;  height: 30px; position: relative; margin-top: 20px; line-height: 30px; left: 650px; "><span style="position: absolute; top: 8px;">Python</span></div>
            <div style=" width:1370px; border-top: 5px solid #f4f4f4; margin-top: 30px; margin-bottom: 10px">
            </div>
            <div @click="videoPlay(item.url, item.title, item.point,item.views,item.collection,item.id,item.size,item.upId,item.upName,item.des,item.jur, item.pay, item.imgUrl)" v-for="item in python" style="display: inline-block">
                <video-card :id="item.id" :title="item.title" :url="item.url" :point="item.point" :collection="item.collection" :views="item.views" :size="item.size" :type="item.type" :time="item.time" :upId="item.upId" :upName="item.upName" :des="item.des" :imgUrl="item.imgUrl" :jur="item.jur" :pay="item.pay"></video-card>
            </div>
            <div style="margin-top: 100px; width: 100px;"></div>
            <div style="margin-bottom: 10px; font-size: 30px;  height: 32px; position: relative; margin-top: 20px; left: 650px;"><span style="position: absolute; top: 8px;">C/C++</span></div>
            <div style=" width:1370px; border-top: 5px solid #f4f4f4; margin-top: 30px; margin-bottom: 10px">
            </div>
            <div @click="videoPlay(item.url, item.title, item.point,item.views,item.collection,item.id,item.size,item.upId,item.upName,item.des,item.jur, item.pay, item.imgUrl)" v-for="item in C" style="display: inline-block">
                <video-card :id="item.id" :title="item.title" :url="item.url" :point="item.point" :collection="item.collection" :views="item.views" :size="item.size" :type="item.type" :time="item.time" :upId="item.upId" :upName="item.upName" :des="item.des" :imgUrl="item.imgUrl" :jur="item.jur" :pay="item.pay"></video-card>
            </div>
            <div style="margin-top: 100px; width: 100px;"></div>
            <div style="margin-bottom: 10px; font-size: 30px;  height: 32px; position: relative; margin-top: 20px; left: 650px;"><span style="position: absolute; top: 8px;">其他</span></div>
            <div style=" width:1370px; border-top: 5px solid #f4f4f4; margin-top: 30px; margin-bottom: 10px">
            </div>
            <div @click="videoPlay(item.url, item.title, item.point,item.views,item.collection,item.id,item.size,item.upId,item.upName,item.des,item.jur, item.pay, item.imgUrl)" v-for="item in other" style="display: inline-block">
                <video-card :id="item.id" :title="item.title" :url="item.url" :point="item.point" :collection="item.collection" :views="item.views" :size="item.size" :type="item.type" :time="item.time" :upId="item.upId" :upName="item.upName" :des="item.des" :imgUrl="item.imgUrl" :jur="item.jur" :pay="item.pay"></video-card>
            </div>
        </div>
        <div class="submitPay" v-if="false">
            <span class="payName">{{payName}}</span>
            <form  action="http://www.handsomehuang.cn:83/pay" method="post" id="form">
                <input style="display: none" type="text" name="goodNo" required v-model="no"><br/>
                <input style="display: none" type="text" name="goodName" required v-model="name"><br/>
                <input style="display: none" type="text" name="goodPrice" required v-model="money"><br/>
                <input style="display: none" type="text" name="userId" required v-model="userId"><br/>
                <input style="display: none" type="text" name="videoId" required v-model="videoId"><br/>
                <input class="goToPay" type="submit" value="去支付">
            </form>
        </div>



        <el-dialog title="确认支付" :visible.sync="dialogFormVisible" style="width: 700px; margin-left: 600px">
            <svg t="1610433614335" class="icon zhifuicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2710" width="200" height="200"><path d="M230.4 576.512c-12.288 9.728-25.088 24.064-28.672 41.984-5.12 24.576-1.024 55.296 22.528 79.872 28.672 29.184 72.704 37.376 91.648 38.912 51.2 3.584 105.984-22.016 147.456-50.688 16.384-11.264 44.032-34.304 70.144-69.632-59.392-30.72-133.632-64.512-212.48-61.44-40.448 1.536-69.632 9.728-90.624 20.992z m752.64 135.68c26.112-61.44 40.96-129.024 40.96-200.192C1024 229.888 794.112 0 512 0S0 229.888 0 512s229.888 512 512 512c170.496 0 321.536-83.968 414.72-211.968-88.064-43.52-232.96-115.712-322.56-159.232-42.496 48.64-105.472 97.28-176.64 118.272-44.544 13.312-84.992 18.432-126.976 9.728-41.984-8.704-72.704-28.16-90.624-47.616-9.216-10.24-19.456-22.528-27.136-37.888 0.512 1.024 1.024 2.048 1.024 3.072 0 0-4.608-7.68-7.68-19.456-1.536-6.144-3.072-11.776-3.584-17.92-0.512-4.096-0.512-8.704 0-12.8-0.512-7.68 0-15.872 1.536-24.064 4.096-20.48 12.8-44.032 35.328-65.536 49.152-48.128 114.688-50.688 148.992-50.176 50.176 0.512 138.24 22.528 211.968 48.64 20.48-43.52 33.792-90.112 41.984-121.344h-307.2v-33.28h157.696v-66.56H272.384V302.08h190.464V235.52c0-9.216 2.048-16.384 16.384-16.384h74.752V302.08h207.36v33.28h-207.36v66.56h165.888s-16.896 92.672-68.608 184.32c115.2 40.96 278.016 104.448 331.776 125.952z" fill="#06B4FD" p-id="2711"></path></svg>
            <div slot="footer" class="dialog-footer">
<!--                <form  action="http://www.handsomehuang.cn:83/pay" method="post">-->
                <form action="http://www.handsomehuang.cn:83/payVideo" method="post" id="form2">
                    <input style="display: none" type="text" name="goodNo" required v-model="no"><br/>
                    <input style="display: none" type="text" name="goodName" required v-model="name"><br/>
                    <input style="display: none" type="text" name="goodPrice" required v-model="money"><br/>
                    <input style="display: none" type="text" name="userId" required v-model="userId"><br/>
                    <input style="display: none" type="text" name="videoId" required v-model="videoId"><br/>
                    <input class="goToPay" type="submit" value="去支付"  @click="dialogFormVisible = false" id="goToPayYa">
                </form>
                <el-button @click="dialogFormVisible = false">取 消</el-button>

            </div>
        </el-dialog>


        <foot></foot>

    </div>
</template>

<script>
    import VideoCard from "./video-card"
    import Foot from "../../components/common/foot"
    import {request} from "../../network/request";

    export default {

        name: "videoStudy",
        data(){
          return{
              java:[],
              python:[],
              web:[],
              C:[],
              other:[],
              money:0,
              no:'',
              name:'',
              userId: parseInt(sessionStorage.getItem("userId")),
              videoId:0,
              payName:"一共99元， 确认支付， 支付成功后不可退款",
              goPay:false,
              dialogFormVisible: false,
              form: {
                  name: '',
                  region: '',
                  date1: '',
                  date2: '',
                  delivery: false,
                  type: [],
                  resource: '',
                  desc: ''
              },
              formLabelWidth: '50px',
              buyed:[],
              color:'#9fe4eb',
              colors:['#9fe4eb', '#000000', '#fef7e7', '#1a1b1f']
          }
        },
        components: {
            VideoCard,
            Foot
        },
        methods: {
            swiper(i){
               this.color = this.colors[i];
            },
            change(url, name, point,views,collection,id,size,upId,upName,des,jur,pay,imgUrl){
                //console.log(imgUrl);
                this.$router.push({
                    path:"/videoPlay",
                    query:{
                        url:url,
                        name:name,
                        point:point,
                        views:views,
                        collection:collection,
                        id:id,
                        size:size,
                        upId:upId,
                        upName:upName,
                        des:des,
                        imgUrl:imgUrl
                    }
                });
            },
            videoPlay(url, name, point,views,collection,id,size,upId,upName,des,jur,pay, imgUrl){
                if(jur == 0){
                    this.change(url, name, point,views,collection,id,size,upId,upName,des,jur,pay,imgUrl);
                }
                this.videoId = id;
                if(jur == 1){
                    let vip = sessionStorage.getItem("vip");
                    if(vip == "vip" || vip == "svip"){
                        this.change(url, name, point,views,collection,id,size,upId,upName,des,jur,pay,imgUrl)
                    }else {
                        this.$confirm('你不是vip， 是否要去充值', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$router.push("/vip");
                        }).catch(() => {

                        });
                    }
                }
                if(jur == 2){
                    let vip = sessionStorage.getItem("vip");
                    let flag = false;
                    for(let i = 0; i < this.buyed.length; i++){
                        if(this.buyed[i].videoId == id){
                            flag = true;
                        }

                    }
                    if(flag){
                        this.change(url, name, point,views,collection,id,size,upId,upName,des,jur,pay)
                    }else {
                        this.$confirm('你还没有购买， 是否购买？ 一共' + pay + '元', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                           this.no = this.uuid(20, 5);
                           this.name = "buyVideo";
                           this.money = pay;
                           this.videoId = id;
                           this.goPay = true;
                           this.dialogFormVisible = true;
                            request({
                                url: "/payVideo",
                                method: "post",
                                data: myformData,

                            })
                        }).catch(() => {

                        });
                    }
                }

            },
            uuid(len, radix) {
                var chars = '0123456789'.split('');
                var uuid = [],
                    i;
                radix = radix || chars.length;

                if (len) {
                    // Compact form
                    for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
                } else {
                    // rfc4122, version 4 form
                    var r;

                    // rfc4122 requires these characters
                    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                    uuid[14] = '4';

                    // Fill in random data.  At i==19 set the high bits of clock sequence as
                    // per rfc4122, sec. 4.1.5
                    for (i = 0; i < 36; i++) {
                        if (!uuid[i]) {
                            r = 0 | Math.random() * 16;
                            uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
                        }
                    }
                }

                return uuid.join('');
            }
        },
        created() {

            request({
                url:"/getAllVideo",
                method: "post",
                data:{

                }
            }).then(res=>{
              console.log(res.data);
              let data = res.data;
              for(let i = 0; i < data.length; i++){
                  if(data[i].type == "java"){
                      this.java.push(data[i]);
                  }else if(data[i].type == "C/C++"){
                      this.C.push(data[i]);
                  }else if(data[i].type == "web"){
                      this.web.push(data[i]);
                  }else if(data[i].type == "python"){
                      this.python.push(data[i]);
                  }else this.other.push(data[i]);
              }

            }).catch(err=>{
                console.log(err);
            });

            request({
                url:"/getBuyedVideo",
                method: "get",
                params:{
                    userId:parseInt(sessionStorage.getItem("userId"))
                }
            }).then(res=>{
                //console.log(res.data);
               this.buyed = res.data;

            }).catch(err=>{
                console.log(err);
            });
        }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .zhifuicon{
        position: absolute;
        width: 150px;
        height: 150px;
        left: 100px;
        top: 50px;
    }
    #goToPayYa{
        position: absolute;
        top: 195px;
        right: 100px;
        height: 40px;

    }
    .goToPay{
        display: inline-block;
        width: 84px;
        height: 30px;
        background: #3efc43;
        border-radius: 4px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        margin-top: 20px;
        margin-left: 20px;
        line-height: 34px;
        cursor: pointer;
        border: none;
        position: absolute;
        top: 35px;
        right: 10px;
    }
    .submitPay{
        width: 500px;
        height: 100px;
        position: fixed;
        top: 20%;
        left: 30%;
        background: #4eb8ff;
    }
    .payName{
        display: inline-block;
        color: #fff;
        margin-left: 30px;
        margin-top: 20px;
    }
    .fenlei{
        padding-top: 10px;
    }
    .qianduan{
        margin-bottom: 10px;
        font-size: 30px;
        height: 30px;
        line-height: 30px;
        position: relative;
        width: 100%;
        left: 630px;
        margin-bottom: 30px;
    }
    .qianduan .font{
        position: absolute;
        top: 8px;
    }
    .head-nav{
        display: inline-block;
        position: relative;
        width: 100%;
        transition: 1s;
    }
    .head-nav ul{
        list-style: none;
        margin-bottom: 50px;

    }
    .head-nav ul li{
        color: #20232c;
        cursor: pointer;
        display: inline-block;
        width: 100px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-size: 14px;

    }
    .head-nav ul li:hover{
        color: #f40;
        font-weight: bold;
    }
    ul{
        list-style: none;
    }

    .right-nav{
        width: 200px;
        display: inline-block;
        position: relative;
        top: -50px;
        left: -220px;
    }
    .right-nav ul li{
        display: inline-block;
        width: 100px;
        height: 40px;
        position: relative;
        top: 7px;
    }
    .right-nav ul li span{
        display: inline-block;
       position: absolute;
        margin-left: 10px;
        font-size: 14px;
        cursor: pointer;
    }
    .right-nav ul li span:hover{
        color: #f40;
        font-weight: bold;
    }
    .logo-three{
        display: inline-block;
        position: relative;
        top: -180px;
    }
    .logo-three li{
        display: inline-block;
        width: 80px;

    }.logo-three li img{
        margin-left: 8px;
         }
    .logo-three li span{
        position: absolute;
        width: 50px;
        display: block;
        font-size: 15px;
        cursor: pointer;
        text-align: center;
    }
    .logo-three li span:hover{
        color: #f40;
    }
</style>